<template>
  <div class="app-container">
    <!-- 顶部筛选区 -->
    <div class="filter-container">
      <el-select
        v-model="currentWebsite"
        value-key="id"
        placeholder="选择网站"
        style="width: 300px;"
        class="filter-item"
        filterable
        @change="handleWebsiteChange"
      >
        <el-option
          v-for="site in websites"
          :key="site.id"
          :label="site.name + ' (' + site.domain + ')'"
          :value="site"
        />
      </el-select>

      <el-input
        v-model="listQuery.kw"
        placeholder="搜索模板名称..."
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />

      <el-select
        v-model="listQuery.template_type"
        placeholder="模板类型"
        style="width: 150px;"
        class="filter-item"
        clearable
        @change="handleFilter"
      >
        <el-option label="布局模板" value="layout" />
        <el-option label="组件模板" value="component" />
        <el-option label="页面模板" value="page" />
      </el-select>

      <el-select
        v-model="listQuery.is_active"
        placeholder="状态"
        style="width: 120px;"
        class="filter-item"
        clearable
        @change="handleFilter"
      >
        <el-option label="激活" value="true" />
        <el-option label="停用" value="false" />
      </el-select>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新建模板
      </el-button>
    </div>

    <!-- 模板列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="{row}">
          {{ row.id }}
        </template>
      </el-table-column>

      <el-table-column label="模板名称" min-width="200" align="center">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleView(row)">{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="描述" min-width="250" align="center">
        <template slot-scope="{row}">
          <span style="font-size: 12px; color: #606266;">{{ row.description || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="模板类型" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getTemplateTypeTag(row.template_type)" size="small">
            {{ getTemplateTypeText(row.template_type) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.is_active"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleStatusChange(row)"
          />
        </template>
      </el-table-column>

      <el-table-column label="默认模板" width="100" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.is_default" type="success" size="mini">默认</el-tag>
          <span v-else style="color: #999;">-</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="160" align="center">
        <template slot-scope="{row}">
          {{ row.created_at }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="240" align="center" fixed="right">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleView(row)">
            查看
          </el-button>
          <el-button type="warning" size="mini" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-if="total>0"
      background
      class="mt-pagination"
      :current-page="listQuery.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="listQuery.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />

    <!-- 模板详情/编辑抽屉 -->
    <el-drawer
      :title="dialogTitle"
      :visible.sync="drawerVisible"
      size="95%"
      :close-on-click-modal="false"
      :wrapper-closable="false"
    >
      <div class="drawer-content-split">
        <!-- 左侧：模板配置表单 (60%) -->
        <div class="left-panel-form">
          <el-form
            ref="templateForm"
            :model="templateForm"
            :rules="templateRules"
            label-width="120px"
          >
            <el-tabs v-model="activeTab">
              <!-- 基本信息 -->
              <el-tab-pane label="基本信息" name="basic">
                <el-form-item label="模板名称" prop="name">
                  <el-input v-model="templateForm.name" placeholder="请输入模板名称" />
                </el-form-item>

                <el-form-item label="模板描述">
                  <el-input
                    v-model="templateForm.description"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入模板描述"
                  />
                </el-form-item>

                <el-form-item label="模板类型" prop="template_type">
                  <el-select v-model="templateForm.template_type" placeholder="请选择模板类型">
                    <el-option label="布局模板" value="layout" />
                    <el-option label="组件模板" value="component" />
                    <el-option label="页面模板" value="page" />
                  </el-select>
                </el-form-item>

                <el-form-item label="状态">
                  <el-switch
                    v-model="templateForm.is_active"
                    active-text="激活"
                    inactive-text="停用"
                  />
                </el-form-item>

                <el-form-item label="设为默认">
                  <el-switch
                    v-model="templateForm.is_default"
                    active-text="是"
                    inactive-text="否"
                  />
                </el-form-item>
              </el-tab-pane>

              <!-- 博客模板 (移到第二位) -->
              <el-tab-pane label="博客模板" name="blog">
                <el-alert
                  title="博客模板说明"
                  type="info"
                  :closable="false"
                  style="margin-bottom: 20px;"
                >
                  <p>博客模板用于"直接替换"部署方式，包含完整的页面HTML和占位符配置。</p>
                  <p>占位符格式：%%title%%、%%content%%、%%author%%、%%publish_date%% 等</p>
                  <p>占位符会在部署时自动替换为文章的实际内容。</p>
                </el-alert>

                <el-form-item label="完整HTML">
                  <el-input
                    v-model="templateForm.final_html"
                    type="textarea"
                    :rows="12"
                    placeholder="完整的页面HTML，包含占位符，如 %%title%%、%%content%% 等"
                  />
                  <div style="margin-top: 12px;">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-download"
                      :loading="extractingPlaceholders"
                      @click="extractPlaceholders"
                    >
                      提取占位符配置
                    </el-button>
                    <span style="margin-left: 10px; font-size: 12px; color: #909399;">
                      点击后自动扫描HTML中的占位符（%%变量名%%）并生成配置
                    </span>
                  </div>
                </el-form-item>

                <el-form-item label="占位符配置">
                  <el-input
                    v-model="templateForm.placeholder_config"
                    type="textarea"
                    :rows="8"
                    placeholder="JSON格式，定义占位符与字段的映射关系，例如：{&quot;%%title%%&quot;: &quot;post.title&quot;, &quot;%%content%%&quot;: &quot;post.content&quot;}"
                  />
                  <div style="margin-top: 8px; font-size: 12px; color: #909399;">
                    <p>常用字段映射：</p>
                    <p>• %%title%% → post.title (文章标题)</p>
                    <p>• %%content%% → post.content (文章内容)</p>
                    <p>• %%author%% → post.author (作者)</p>
                    <p>• %%publish_date%% → post.publish_date (发布日期)</p>
                  </div>
                </el-form-item>
              </el-tab-pane>

              <!-- HTML模板 -->
              <el-tab-pane label="HTML模板" name="html">
                <el-form-item label="HTML代码">
                  <el-input
                    v-model="templateForm.html_template"
                    type="textarea"
                    :rows="15"
                    placeholder="请输入HTML模板代码，可使用占位符 %%变量名%% 来动态替换内容"
                  />
                  <div style="margin-top: 8px; font-size: 12px; color: #909399;">
                    <p>提示：使用 %%变量名%% 格式的占位符，例如 %%title%%、%%content%% 等</p>
                  </div>
                </el-form-item>
              </el-tab-pane>

              <!-- CSS模板 -->
              <el-tab-pane label="CSS模板" name="css">
                <el-form-item label="CSS代码">
                  <el-input
                    v-model="templateForm.css_template"
                    type="textarea"
                    :rows="15"
                    placeholder="请输入CSS样式代码"
                  />
                </el-form-item>
              </el-tab-pane>

              <!-- JS模板 -->
              <el-tab-pane label="JS模板" name="js">
                <el-form-item label="JavaScript代码">
                  <el-input
                    v-model="templateForm.js_template"
                    type="textarea"
                    :rows="15"
                    placeholder="请输入JavaScript代码"
                  />
                </el-form-item>
              </el-tab-pane>

              <!-- AI配置 -->
              <el-tab-pane label="AI配置" name="ai">
                <el-form-item label="变量定义">
                  <el-input
                    v-model="templateForm.variables_schema"
                    type="textarea"
                    :rows="8"
                    placeholder="JSON Schema格式，定义模板中可用的变量及其类型"
                  />
                </el-form-item>

                <el-form-item label="AI填充提示词">
                  <el-input
                    v-model="templateForm.ai_fill_prompt"
                    type="textarea"
                    :rows="8"
                    placeholder="指导AI如何填充此模板的变量"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>

            <!-- 底部操作按钮 -->
            <div class="form-footer">
              <el-button @click="drawerVisible = false">取消</el-button>
              <el-button v-if="dialogMode !== 'view'" type="primary" :loading="saveLoading" @click="handleSave">
                保存模板
              </el-button>
            </div>
          </el-form>
        </div>

        <!-- 右侧：AI 模板助手 (40%) -->
        <div v-if="dialogMode !== 'view'" class="right-panel-ai">
          <div class="ai-panel-header">
            <i class="el-icon-magic-stick" style="color: #1EB7E6;" />
            <span style="margin-left: 8px; font-weight: 600; font-size: 16px;">AI 模板助手</span>
          </div>
          <AIInnerChat
            ref="aiInnerChat"
            api-url="/static_web/api/ai/chat/"
            handler-name="template_generator"
            :context-data="templateAIContextComputed"
            :suggested-questions="aiSuggestedQuestions"
            placeholder="例如：生成一个博客文章模板，包含标题、内容、作者、日期等占位符..."
            @fill-form="handleAIFillForm"
            @json-parsed="handleAIJsonParsed"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { Get as GetWebsites } from '@/api/static_web/website'
import { Get, Post, Put, Delete } from '@/api/static_web_template'
import AIInnerChat from '@/components/AIInnerChat'

export default {
  name: 'StaticWebTemplates',
  components: {
    AIInnerChat
  },
  data() {
    return {
      // 网站列表
      websites: [],
      currentWebsite: null,

      // 列表相关
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        pagesize: 20,
        kw: '',
        template_type: '',
        is_active: ''
      },

      // 抽屉相关
      drawerVisible: false,
      dialogMode: 'create', // create, edit, view
      dialogTitle: '新建模板',
      activeTab: 'basic',
      saveLoading: false,
      extractingPlaceholders: false,

      // AI 助手建议问题
      aiSuggestedQuestions: [
        {
          icon: 'el-icon-document',
          color: '#409EFF',
          title: '生成博客模板',
          question: '生成一个博客文章模板，包含标题、内容、作者、日期、标签等占位符，使用 %%变量名%% 格式'
        },
        {
          icon: 'el-icon-files',
          color: '#67C23A',
          title: '生成产品模板',
          question: '生成一个产品展示模板，包含产品名称、描述、价格、图片等占位符'
        },
        {
          icon: 'el-icon-setting',
          color: '#E6A23C',
          title: '生成占位符配置',
          question: '为当前的 HTML 模板生成 JSON 格式的占位符配置'
        },
        {
          icon: 'el-icon-magic-stick',
          color: '#F56C6C',
          title: '优化模板代码',
          question: '优化当前的模板代码，改进结构和可维护性'
        }
      ],

      // 表单数据
      templateForm: {
        id: null,
        name: '',
        description: '',
        template_type: 'page',
        html_template: '',
        css_template: '',
        js_template: '',
        variables_schema: '',
        ai_fill_prompt: '',
        final_html: '',
        placeholder_config: '',
        is_default: false,
        is_active: true
      },

      // 表单验证规则
      templateRules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        template_type: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    // AI 上下文数据 - 动态更新
    templateAIContextComputed() {
      return {
        mode: this.dialogMode,
        template_id: this.templateForm.id,
        template_name: this.templateForm.name,
        template_type: this.templateForm.template_type,
        current_data: {
          html_template: this.templateForm.html_template,
          css_template: this.templateForm.css_template,
          js_template: this.templateForm.js_template,
          final_html: this.templateForm.final_html,
          placeholder_config: this.templateForm.placeholder_config,
          variables_schema: this.templateForm.variables_schema,
          ai_fill_prompt: this.templateForm.ai_fill_prompt
        },
        website: this.currentWebsite
      }
    }
  },
  created() {
    this.loadWebsites()
  },
  methods: {
    // 加载网站列表
    loadWebsites() {
      GetWebsites().then(response => {
        if (response.data && response.data.data) {
          this.websites = response.data.data
          if (this.websites.length > 0) {
            this.currentWebsite = this.websites[0]
            this.getList()
          }
        } else if (response.success) {
          this.websites = response.data
          if (this.websites.length > 0) {
            this.currentWebsite = this.websites[0]
            this.getList()
          }
        }
      })
    },

    // 网站切换
    handleWebsiteChange() {
      this.listQuery.page = 1
      this.getList()
    },

    // 获取模板列表
    getList() {
      if (!this.currentWebsite || !this.currentWebsite.id) {
        return
      }

      this.listLoading = true

      // 构建查询参数
      const params = new URLSearchParams()
      params.append('website_id', this.currentWebsite.id)
      if (this.listQuery.kw) {
        params.append('kw', this.listQuery.kw)
      }
      if (this.listQuery.template_type) {
        params.append('template_type', this.listQuery.template_type)
      }
      if (this.listQuery.is_active) {
        params.append('is_active', this.listQuery.is_active)
      }

      Get(null, params.toString()).then(response => {
        if (response.success) {
          this.list = response.data
          this.total = response.total || response.data.length
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    // 新建模板
    handleCreate() {
      if (!this.currentWebsite || !this.currentWebsite.id) {
        this.$message.warning('请先选择网站')
        return
      }

      this.dialogMode = 'create'
      this.dialogTitle = '新建模板'
      this.activeTab = 'basic'
      this.resetForm()
      this.drawerVisible = true
    },

    // 查看模板
    handleView(row) {
      this.dialogMode = 'view'
      this.dialogTitle = '查看模板 - ' + row.name
      this.activeTab = 'basic'
      this.loadTemplateDetail(row.id)
      this.drawerVisible = true
    },

    // 编辑模板
    handleEdit(row) {
      this.dialogMode = 'edit'
      this.dialogTitle = '编辑模板 - ' + row.name
      this.activeTab = 'basic'
      this.loadTemplateDetail(row.id)
      this.drawerVisible = true
    },

    // 加载模板详情
    loadTemplateDetail(id) {
      Get(id).then(response => {
        if (response.success) {
          this.templateForm = {
            id: response.data.id,
            name: response.data.name,
            description: response.data.description || '',
            template_type: response.data.template_type,
            html_template: response.data.html_template || '',
            css_template: response.data.css_template || '',
            js_template: response.data.js_template || '',
            variables_schema: response.data.variables_schema || '',
            ai_fill_prompt: response.data.ai_fill_prompt || '',
            final_html: response.data.final_html || '',
            placeholder_config: response.data.placeholder_config || '',
            is_default: response.data.is_default || false,
            is_active: response.data.is_active
          }
        }
      })
    },

    // 保存模板
    handleSave() {
      this.$refs.templateForm.validate(valid => {
        if (!valid) {
          return
        }

        this.saveLoading = true

        const data = {
          ...this.templateForm,
          website_id: this.currentWebsite.id
        }

        const apiCall = this.dialogMode === 'create'
          ? Post(data)
          : Put(this.templateForm.id, data)

        apiCall.then(response => {
          if (response.success) {
            this.$message.success(this.dialogMode === 'create' ? '创建成功' : '更新成功')
            this.drawerVisible = false
            this.getList()
          } else {
            this.$message.error(response.msg || '操作失败')
          }
          this.saveLoading = false
        }).catch(error => {
          this.$message.error('操作失败: ' + (error.message || '未知错误'))
          this.saveLoading = false
        })
      })
    },

    // 删除模板
    handleDelete(row) {
      this.$confirm('确定要删除模板 "' + row.name + '" 吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(row.id).then(response => {
          if (response.success) {
            this.$message.success('删除成功')
            this.getList()
          } else {
            this.$message.error(response.msg || '删除失败')
          }
        })
      })
    },

    // 状态切换
    handleStatusChange(row) {
      Put(row.id, { is_active: row.is_active }).then(response => {
        if (response.success) {
          this.$message.success('状态已更新')
        } else {
          this.$message.error('状态更新失败')
          row.is_active = !row.is_active // 恢复原状态
        }
      }).catch(() => {
        row.is_active = !row.is_active // 恢复原状态
      })
    },

    // 重置表单
    resetForm() {
      this.templateForm = {
        id: null,
        name: '',
        description: '',
        template_type: 'page',
        html_template: '',
        css_template: '',
        js_template: '',
        variables_schema: '',
        ai_fill_prompt: '',
        final_html: '',
        placeholder_config: '',
        is_default: false,
        is_active: true
      }
      if (this.$refs.templateForm) {
        this.$refs.templateForm.clearValidate()
      }
    },

    // 获取模板类型标签颜色
    getTemplateTypeTag(type) {
      const map = {
        layout: 'success',
        component: 'warning',
        page: 'primary'
      }
      return map[type] || 'info'
    },

    // 获取模板类型文本
    getTemplateTypeText(type) {
      const map = {
        layout: '布局模板',
        component: '组件模板',
        page: '页面模板'
      }
      return map[type] || type
    },

    // 分页 - 每页数量变化
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.listQuery.page = 1
      this.getList()
    },

    // 分页 - 页码变化
    handlePageChange(val) {
      this.listQuery.page = val
      this.getList()
    },

    // AI 填充表单数据
    handleAIFillForm(data) {
      try {
        console.log('AI 返回的数据:', data)

        // 遍历 AI 返回的数据，填充到表单中
        Object.keys(data).forEach(key => {
          // 跳过不存在的字段
          if (!(key in this.templateForm)) {
            return
          }

          const value = data[key]

          // 跳过对象类型的值（如 website 对象）
          if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
            console.log(`跳过对象字段: ${key}`, value)
            return
          }

          // 对于 JSON 字符串字段，确保格式化
          if (key === 'placeholder_config' || key === 'variables_schema') {
            try {
              // 如果是对象，转为格式化的 JSON 字符串
              if (typeof value === 'object') {
                this.$set(this.templateForm, key, JSON.stringify(value, null, 2))
              } else {
                // 如果已经是字符串，尝试格式化
                const parsed = JSON.parse(value)
                this.$set(this.templateForm, key, JSON.stringify(parsed, null, 2))
              }
            } catch (e) {
              // 如果不是有效 JSON，直接使用原值
              this.$set(this.templateForm, key, value)
            }
          } else {
            // 其他字段直接赋值
            this.$set(this.templateForm, key, value)
          }
        })

        this.$message.success('表单数据已自动填充，请检查并保存')

        // 如果有验证错误，清除它们
        if (this.$refs.templateForm) {
          this.$refs.templateForm.clearValidate()
        }
      } catch (error) {
        console.error('填充表单失败:', error)
        this.$message.error('填充表单失败: ' + error.message)
      }
    },

    // AI JSON 解析完成
    handleAIJsonParsed(data) {
      console.log('AI 返回的 JSON 数据:', data)
      // 可以在这里做额外的处理
    },

    // 从完整HTML中提取占位符配置
    extractPlaceholders() {
      const finalHtml = this.templateForm.final_html

      if (!finalHtml || !finalHtml.trim()) {
        this.$message.warning('请先输入完整HTML')
        return
      }

      this.extractingPlaceholders = true

      try {
        // 使用正则表达式提取所有 %%变量名%% 格式的占位符
        const placeholderRegex = /%%(\w+)%%/g
        const matches = finalHtml.matchAll(placeholderRegex)
        const placeholders = new Set()

        for (const match of matches) {
          placeholders.add(match[0]) // 完整的占位符，如 %%title%%
        }

        if (placeholders.size === 0) {
          this.$message.warning('未找到任何占位符（格式：%%变量名%%）')
          this.extractingPlaceholders = false
          return
        }

        // 常见字段映射表
        const commonMappings = {
          '%%title%%': 'post.title',
          '%%content%%': 'post.content',
          '%%author%%': 'post.author',
          '%%publish_date%%': 'post.publish_date',
          '%%date%%': 'post.date',
          '%%tags%%': 'post.tags',
          '%%category%%': 'post.category',
          '%%excerpt%%': 'post.excerpt',
          '%%image%%': 'post.image',
          '%%url%%': 'post.url',
          '%%description%%': 'post.description',
          '%%keywords%%': 'post.keywords',
          '%%slug%%': 'post.slug',
          '%%id%%': 'post.id'
        }

        // 构建配置对象
        const config = {}
        placeholders.forEach(placeholder => {
          // 如果有常见映射，使用常见映射；否则根据占位符名称推断
          if (commonMappings[placeholder]) {
            config[placeholder] = commonMappings[placeholder]
          } else {
            // 去掉 %% 符号，作为字段名
            const fieldName = placeholder.replace(/%%/g, '')
            config[placeholder] = `post.${fieldName}`
          }
        })

        // 格式化为 JSON 字符串
        const configJson = JSON.stringify(config, null, 2)

        // 填充到表单
        this.templateForm.placeholder_config = configJson

        this.$message.success(`成功提取 ${placeholders.size} 个占位符配置`)

        // 清除验证错误
        if (this.$refs.templateForm) {
          this.$refs.templateForm.clearValidate('placeholder_config')
        }
      } catch (error) {
        console.error('提取占位符失败:', error)
        this.$message.error('提取失败: ' + error.message)
      } finally {
        this.extractingPlaceholders = false
      }
    }
  }
}
</script>

<style scoped>
.filter-container {
  padding: 10px 0;
  margin-bottom: 10px;
}

.filter-item {
  margin-right: 10px;
  margin-bottom: 10px;
}

.link-type {
  color: #409EFF;
  cursor: pointer;
}

.link-type:hover {
  text-decoration: underline;
}

.mt-pagination {
  margin-top: 20px;
  text-align: right;
}

/* 抽屉内容 - 左右分栏布局 */
.drawer-content-split {
  display: flex;
  height: 100%;
  gap: 20px;
  padding: 0 20px 20px;
}

/* 左侧表单面板 (60%) */
.left-panel-form {
  flex: 0 0 60%;
  overflow-y: auto;
  padding-right: 10px;
}

/* 右侧 AI 助手面板 (40%) */
.right-panel-ai {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #EBEEF5;
  padding-left: 20px;
  overflow: hidden;
}

.ai-panel-header {
  padding: 10px 0 15px;
  border-bottom: 2px solid #1EB7E6;
  margin-bottom: 15px;
  flex-shrink: 0;
}

/* 表单底部按钮 */
.form-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 深度选择器 - 调整抽屉内部样式 */
::v-deep .el-drawer__body {
  padding: 20px 0;
  overflow: hidden;
}

::v-deep .el-form-item {
  margin-bottom: 18px;
}

::v-deep .el-tabs__content {
  max-height: calc(100vh - 350px);
  overflow-y: auto;
}
</style>
